/** 气泡样式 */
@mixin bubble {
  @apply w-fit max-w-35vw min-h-1em p-[8px_12px] text-15px line-height-22px bg-[--bg-bubble] rounded-[2px_18px_18px];
  word-break: break-all; /** 强制连续文本换行 */
  &.active {
    background-color: var(--bg-bubble-active);
    color: var(--text-color);
  }
}
@mixin float($position: top) {
  @if $position == bottom {
    @apply fixed z-10 bottom-210px w-fit select-none text-#13987f cursor-pointer;
  } @else {
    @apply fixed z-10 top-80px w-fit select-none text-#13987f cursor-pointer;
  }
}
.bubble {
  @include bubble;
}
.bubble-oneself {
  @include bubble;
  @apply rounded-[18px_2px_18px_18px] color-#fff;
  background-color: var(--bg-active-msg);
}
/**! 气泡动画 */
.bubble-animation {
  animation: bubble-twinkle 0.4s ease-out forwards;
}
.photo-wall {
  @extend .bubble-oneself;
  @apply flex flex-col items-start gap-6px max-w-380px;
}
.float-header {
  @include float;
}
.float-footer {
  @include float(bottom);
}
.float-box {
  background-color: #fff;
  border-radius: 50px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  &:hover {
    background-color: rgb(195, 221, 216);
  }
}
/** 浮标达到最大值时候的样式 */
.max:hover {
  background-color: #f5dce1;
}
/** 回复气泡的样式 */
.reply-bubble {
  @apply text-12px text-[--reply-color] bg-[--bg-reply-bubble] rounded-8px p-4px cursor-pointer select-none;
  svg,
  span {
    transition: color 0.4s ease-in-out;
  }
  &:hover {
    svg {
      color: #13987f;
    }
    span {
      color: var(--reply-hover);
    }
  }
  .content-span {
    width: fit-content;
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /** 回复图片的计数器样式 */
  .reply-img-sub {
    @apply absolute bottom-8px right-6px color-#13987f bg-[--bg-reply-img-count] p-[2px_4px] rounded-6px text-10px;
  }
}
/** emoji回复气泡的样式 */
.emoji-reply-bubble {
  @apply relative rounded-8px p-[4px_8px] cursor-pointer select-none bg-#13987F66 text-14px w-fit;
}
/** 跳转到回复内容时候显示的样式 */
.active-reply {
  background-color: var(--bg-reply-active);
  border-radius: 8px;
  margin: 0 8px;
  transition: all 0.4s ease-in-out;
}
/**  跳转到回复内容时候的退出动画 */
.reply-exit {
  margin: 0;
  background-color: inherit;
  border-radius: 0;
  transition: all 0.4s ease-in-out;
}
/**! 替换ait的字体颜色 */
:deep(#aitSpan) {
  @apply text-inherit cursor-pointer;
}